<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="ot" uri="http://www.ideyatech.com/tides"%>
<%@ taglib prefix="idy" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<idy:bs-iris-header title_webpage="title.patient.form">
</idy:bs-iris-header>

<div class="page-body">
	<div class="form-box-title">
		<h4>
			<c:if test="${param.action eq 'create'}">
				Register a new patient
			</c:if>
			<c:if test="${param.action eq 'update'}">
				Update patient details
			</c:if>
		</h4>
	</div>
	<hr/>
	<form:form commandName="patient" method="POST" id="patient-form" cssClass="form-horizontal">
		<spring:bind path="patient.*">
			<c:if test="${status.error}">
				<div class='alert alert-error form-error'>
					<button type="button" class="close" data-dismiss="alert">&times;</button>
					<strong>Oh snap!</strong><br />
					<form:errors path="*" />
				</div>
			</c:if>
		</spring:bind>
	
		<div class="form-box-title"><h5>Basic Information</h5></div>
		
		<div class="control-group">
			<label class="control-label"><spring:message code="label.patient.firstName"/></label>
			<div class="controls">
				<form:input path="firstName" autocomplete="off"/><span class="required-field">*</span>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label"><spring:message code="label.patient.lastName"/></label>
			<div class="controls">
				<form:input path="lastName" autocomplete="off"/><span class="required-field">*</span>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label"><spring:message code="label.patient.middleName"/></label>
			<div class="controls">
				<form:input path="middleName" autocomplete="off"/>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label"><spring:message code="label.patient.nickname"/></label>
			<div class="controls">
				<form:input path="nickname" autocomplete="off"/>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label"><spring:message code="label.patient.gender"/></label>
			<div class="controls">
				<c:forEach items="${genders}" var="gender">
					<label class="radio inline">
						<input type="radio" name="gender" class="optionsRadio" value="${gender.id}" <c:if test='${patient.gender.id eq gender.id}'>checked="checked"</c:if>/>
						${gender.value}
					</label>
				</c:forEach>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label"><spring:message code="label.patient.birthdate"/></label>
			<div class="controls">
				<div class="input-append">
					<input type="text" id="birthdate" name="birthdate" value="<fmt:formatDate value='${patient.birthdate}' pattern="MM/dd/yyyy"/>" autocomplete="off"/><span class="required-field">*</span>
					<span class="add-on"><i class="icon-calendar"></i></span>
				</div>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label"><spring:message code="label.patient.address" /></label>
			<div class="controls">
				<form:textarea path="address" cssClass="wide"/>
			</div>
		</div>
		
		<div class="control-group">
			<label class="control-label"><spring:message code="label.patient.email-address" /></label>
			<div class="controls">
				<form:input path="emailAddress" autocomplete="off"/>
			</div>
		</div>
		
		<hr/>
		
		<div class="form-box-title"><h5>Contact Details</h5></div>
		<div style="display: none">
			<select id="number-types-sample">
				<c:forEach items="${numberTypes}" var="type">
					<option value="${type.id}">${type.value}</option>
				</c:forEach>
			</select>
		</div>
		
		<div id="dynamic-field-list" class="control-group">
			<c:choose>
				<c:when test="${empty patient.contactNumbers}">
					<div class="dynamic-field contact-number-counter">
						<select class="short" name="contactNumbers[0].type">
							<c:forEach items="${numberTypes}" var="type">
								<option value="${type.id}">${type.value}</option>
							</c:forEach>
						</select>
						<input type="text" name="contactNumbers[0].number" autocomplete="off"/>
						<input type="hidden" name="contactNumbers[0].isDeleted" value="false">
						<a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a>
					</div>
				</c:when>
				<c:otherwise>
					<c:forEach items="${patient.contactNumbers}" var="contactNumber" varStatus="status">
						<div class="dynamic-field contact-number-counter" <c:if test="${contactNumber.isDeleted}">style="display: none;"</c:if>>
							<select class="short" name="contactNumbers[${status.index}].type">
								<c:forEach items="${numberTypes}" var="type">
									<option value="${type.id}" <c:if test='${type.id eq contactNumber.type.id}'>selected="selected"</c:if>>${type.value}</option>
								</c:forEach>
							</select>
							<input type="text" name="contactNumbers[${status.index}].number" autocomplete="off" value="${contactNumber.number}"/>
							<input type="hidden" name="contactNumbers[${status.index}].isDeleted" value="${contactNumber.isDeleted}">
							<a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a>
						</div>
					</c:forEach>
				</c:otherwise>
			</c:choose>
		</div>
		
		<div class="text-info alert-shorter">
			<a id="new-contact-number" class="btn btn-info btn-mini"><i class="icon-plus icon-white"></i> New contact number</a>
		</div>
		
		<hr/>
		<div class="form-box-title"><h5>Allergies</h5></div>
		
		<div style="display: none">
			<select id="allergy-status-sample">
				<c:forEach items="${allergyStatus}" var="status">
					<option value="${status.id}">${status.value}</option>
				</c:forEach>
			</select>
			
			<select id="allergen-sample">
				<option value="">--Select One--</option>
				<c:forEach items="${allergens}" var="allergen">
					<option value="${allergen.id}">${allergen.name}</option>
				</c:forEach>
			</select>
		</div>
		
		<div id="dynamic-field-list-allergy" class="control-group">
			<c:choose>
				<c:when test="${empty patient.patientAllergies}">
					<div class="dynamic-field allergy-counter">
						<select class="short" name="patientAllergies[0].allergyStatus">
							<c:forEach items="${allergyStatus}" var="status">
								<option value="${status.id}">${status.value}</option>
							</c:forEach>
						</select>
						<select name="patientAllergies[0].allergen">
							<option value="">--Select One--</option>
							<c:forEach items="${allergens}" var="allergen">
								<option value="${allergen.id}">${allergen.name}</option>
							</c:forEach>
						</select>
						<input type="hidden" name="patientAllergies[0].isDeleted" value="false"/>
						<a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a>
					</div>
				</c:when>
				<c:otherwise>
					<c:forEach items="${patient.patientAllergies}" var="patientAllergy" varStatus="sts">
						<div class="dynamic-field allergy-counter" <c:if test="${patientAllergy.isDeleted}">style="display: none;"</c:if>>
							
							<select class="short" name="patientAllergies[${sts.index}].allergyStatus">
								<c:forEach items="${allergyStatus}" var="status">
									<option value="${status.id}" <c:if test='${patientAllergy.allergyStatus.id eq status.id}'>selected="selected"</c:if>>${status.value}</option>
								</c:forEach>
							</select>
							<select name="patientAllergies[${sts.index}].allergen">
								<option value="">--Select One--</option>
								<c:forEach items="${allergens}" var="allergen">
									<option value="${allergen.id}" <c:if test='${patientAllergy.allergen.id eq allergen.id}'>selected="selected"</c:if>>${allergen.name}</option>
								</c:forEach>
							</select>
							<input type="hidden" name="patientAllergies[${sts.index}].isDeleted" value="false"/>
							<a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a>
						</div>
					</c:forEach>
					
				</c:otherwise>
			</c:choose>
		</div>
		
		<div class="text-info alert-shorter">
			<a id="new-allergy" class="btn btn-info btn-mini"><i class="icon-plus icon-white"></i> New allergy</a>
		</div>

		<hr/>
		
		<div class="form-box-title"><h5>Diseases</h5></div>
		<div style="display: none">
			<select id="disease-status-sample">
				<c:forEach items="${diseaseStatus}" var="status">
					<option value="${status.id}">${status.value}</option>
				</c:forEach>
			</select>
			
			<select id="disease-sample">
				<option value="">--Select One--</option>
				<c:forEach items="${diseases}" var="disease">
					<option value="${disease.id}">${disease.name}</option>
				</c:forEach>
			</select>
		</div>
		<div id="dynamic-field-list-disease" class="control-group">
			<c:choose>
				<c:when test="${empty patient.patientDiseases}">
					<div class="dynamic-field disease-counter">
						<select class="short" name="patientDiseases[0].diseaseStatus">
							<c:forEach items="${diseaseStatus}" var="status">
								<option value="${status.id}">${status.value}</option>
							</c:forEach>
						</select>
						<select name="patientDiseases[0].disease">
							<option value="">--Select One--</option>
							<c:forEach items="${diseases}" var="disease">
								<option value="${disease.id}">${disease.name}</option>
							</c:forEach>
						</select>
						<input type="hidden" name="patientDiseases[0].isDeleted" value="false"/>
						<a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a>
					</div>
				</c:when>
				<c:otherwise>
					<c:forEach items="${patient.patientDiseases}" var="patientDisease" varStatus="sts">
						<div class="dynamic-field disease-counter" <c:if test='${patientDisease.isDeleted}'>style="display: none;"</c:if>>
							<select class="short" name="patientDiseases[${sts.index}].diseaseStatus">
								<c:forEach items="${diseaseStatus}" var="status">
									<option value="${status.id}" <c:if test='${patientDisease.diseaseStatus.id eq status.id}'>selected="selected"</c:if>>${status.value}</option>
								</c:forEach>
							</select>
							<select name="patientDiseases[${sts.index}].disease">
								<option value="">--Select One--</option>
								<c:forEach items="${diseases}" var="disease">
									<option value="${disease.id}" <c:if test='${patientDisease.disease.id eq disease.id}'>selected="selected"</c:if>>${disease.name}</option>
								</c:forEach>
							</select>
							<input type="hidden" name="patientDiseases[${sts.index}].isDeleted" value="false"/>
							<a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a>
						</div>
					</c:forEach>
				</c:otherwise>
			</c:choose>
			
		</div>
		
		<div class="text-info alert-shorter">
			<a id="new-disease" class="btn btn-info btn-mini"><i class="icon-plus icon-white"></i> New disease</a>
		</div>
		
		<div class="control-group">
			<div class="controls">
				<input type="submit" value="Save" class="btn btn-primary"/>
				<a class="btn">Cancel</a>
			</div>
		</div>
	</form:form>
</div>

<idy:bs-iris-footer>
	<script type="text/javascript">
		
		$(document).ready(function(){
			$('#birthdate').datepicker({
				yearRange: "-80:+0",
				changeMonth: true,
			    changeYear: true
			});
			
			var contactNumberSample = $('#number-types-sample').html();
			
			$('#new-contact-number').click(function(){
				var contactNumberCounter = $('.contact-number-counter').size();
				$('#dynamic-field-list').append('<div class="dynamic-field contact-number-counter"><select class="short" name="contactNumbers['+contactNumberCounter+'].type">'+contactNumberSample+'</select> <input type="text" name="contactNumbers['+contactNumberCounter+'].number" autocomplete="off"/> <input type="hidden" name="contactNumbers['+contactNumberCounter+'].isDeleted" value="true"><a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a></div>');
			});
			
			$('.remove').live("click", function(){
				$(this).prev().val("true");
				$(this).parent().fadeOut();
			});
			
			var allergyStatusSample = $('#allergy-status-sample').html(),
			allergenSample = $('#allergen-sample').html(),
			diseaseStatusSample = $('#disease-status-sample').html(),
			diseaseSample = $('#disease-sample').html();
		
			$('#new-allergy').click(function(){
				var allergyCounter = $('.allergy-counter').size();
				$('#dynamic-field-list-allergy').append('<div class="dynamic-field allergy-counter"><select class="short" name="patientAllergies['+allergyCounter+'].allergyStatus">'+allergyStatusSample+'</select> <select name="patientAllergies['+allergyCounter+'].allergen">'+allergenSample+'</select> <input type="hidden" name="patientAllergies['+allergyCounter+'].isDeleted" value="false"/><a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a></div>');
			});
			
			$('#new-disease').click(function(){
				var diseaseCounter = $('.disease-counter').size();
				$('#dynamic-field-list-disease').append('<div class="dynamic-field disease-counter"><select class="short" name="patientDiseases['+diseaseCounter+'].diseaseStatus">'+diseaseStatusSample+'</select> <select name="patientDiseases['+diseaseCounter+'].disease">'+diseaseSample+'</select> <input type="hidden" name="patientDiseases['+diseaseCounter+'].isDeleted" value="false"/><a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a></div>');
			});
			
			<c:if test="${empty patient.gender}">
				$('input[name=gender]:nth(0)').attr("checked","checked");
			</c:if>
		});
	</script>
</idy:bs-iris-footer>